<template>
    <main class="flex-center">
        <form @submit.prevent="updateUser">
            <message-box :message="message"></message-box>
            <p>
                <label class="text-right">用户名：</label>
                <input name="username" v-model="user.username" placeholder="请输入用户名">
            </p>
            <p>
                <label class="text-right">年龄：</label>
                <input type="number" name="age" v-model="user.age" placeholder="请输入年龄" min="0" max="120">
            </p>
            <p>
                <label class="text-right">性别：</label>
                <input type="radio" id="man" :value="0" v-model.number="user.gender" :checked="user.gender === 0">
                <label for="man">男</label>
                <input type="radio" id="woman" class="ml-20px" :value="1" v-model.number="user.gender" :checked="user.gender === 1">
                <label for="woman">女</label>
            </p>
            <p>
                <label class="text-right">邮箱：</label>
                <input type="email" name="email" v-model="user.email" placeholder="请输入新邮箱"/>
            </p>
            <p>
                <label class="text-right">注册时间：</label>
                <input :value="formatDate(user.createTime)" disabled="disabled">
            </p>
            <p class="new-password" v-show="isUpdatePassword">
                <label class="text-right">新密码：</label>
                <input type="password" name="password" v-model="user.password" placeholder="请输入新密码" />
            </p>
            <p><button class="btn btn-success w-100">提交修改</button></p>
            <p>
                <button type="button" class="btn-default w-100"  @click="isUpdatePassword = !isUpdatePassword">
                    {{ isUpdatePassword ? '放弃修改密码' : '修改密码' }}
                </button>
            </p>
        </form>
    </main>
</template>

<script>
    import MessageBox from '../../components/MessageBox.vue';
    import userService from '../../service/UserService';
    import ReturnResult from '../../utils/ReturnResult';

    /**
     * 用户详情页面
     */
    export default {
        components: {
            MessageBox
        },
        data() {
            return {
                user: {},                   // 用户信息
                isUpdatePassword: false,    // 是否修改密码
                message: '',                // 提示信息
            }
        },
        computed: {
            loginUser() {
                return this.$store.state.loginUser.data;
            },
            /**
             * 是否是管理页面
             */
            isManager() {
                return this.$route.path.includes('manager');
            } 
        },
        methods: {
            /**
             * 修改用户信息
             */
            async updateUser() {
                // 如果表单数据与原来的用户数据一样，表示用户信息未作任何修改
                if (userService.equalsUser(this.user, this.loginUser) && !this.isUpdatePassword) return;

                const result = await userService.updateUser(this.user, this.isUpdatePassword);
                if (result.code === ReturnResult.CODE_SUCCESS) {    
                    // 修改成功，更新用户登录数据
                    this.$store.commit('loginUser/login', this.user);
                }
                this.message = result.message;
            },
        },
        created() {
            // 用户详情页面（当前登录用户）
            if (this.$route.name === 'UserDetail') {
                Object.assign(this.user, this.loginUser);
                return;
            } 

            // 用户管理页面
            if (this.$route.params?.id) {
                userService.getUserById(this.$route.params?.id)
                    .then(user => this.user = user);
            }
        }
    }
</script>